import React, {useState} from "react";
import {BrowserRouter, Switch, Route} from "react-router-dom";
import _ from "lodash";
import {ConfigProvider} from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import antdZhCN from "antd/lib/locale/zh_CN";
import antdEnUS from "antd/lib/locale/en_US";
import intlZhCN from "./locales/zh";
import intlEnUS from "./locales/en";
import {IntlProvider} from "react-intl";
import {InjectIntlContext} from '@/common/hooks/useFormatMessage'
import {systemKey} from "@/config/menu";
import {Provider as ReduxProvider} from "react-redux";
import store from "./store";
import Login from '@/pages/login'
import {Page403, Page404} from "@/pages/Exception";
import LayoutHeaderNav from "@/components/Layout";

interface ILocaleMap {
  [index: string]: any;
}

const localeMap: ILocaleMap = {
  zh: {
    antd: antdZhCN,
    intl: "zh",
    intlMessages: intlZhCN,
    title: systemKey,
  },
  en: {
    antd: antdEnUS,
    intl: "en",
    intlMessages: intlEnUS,
    title: systemKey,
  },
};

export const {Provider, Consumer} = React.createContext("zh");
const defaultLanguage = window.localStorage.getItem("language") || "zh"; // navigator.language.substr(0, 2)

const App: React.FC = () => {

  const [language, setLanguage] = useState(defaultLanguage);
  const [projectList, setProjectList] = useState([]);

  const title = _.get(localeMap[language], "title");
  const intl = _.get(localeMap[language], "intl", "zh");
  const intlMessages = _.get(localeMap[language], "intlMessages", intlZhCN);// defaultValue = intlZhCN

  React.useEffect(() => {

  }, [])

  return (
    <IntlProvider messages={intlMessages} locale={intl}>
      <ConfigProvider locale={zhCN}>
        <InjectIntlContext>
          <Provider value={language}>
            <ReduxProvider store={store}>
              <BrowserRouter basename={systemKey}>
                <Switch>
                  <Route exact={true} path={"/login"} component={Login}/>
                  <Route exact={true} path="/403" component={Page403}/>
                  <Route exact={true} path="/404" component={Page404}/>

                  <LayoutHeaderNav
                    language={language}
                    projectList={projectList}
                    onLanguageChange={setLanguage}
                    tenantProjectVisible={true}
                    documentGuideVisible={true}
                    currentProject={currentProject}
                    setCurrentProject={setCurrentProject}
                    onMount={() => {
                    }}
                  >

                  </LayoutHeaderNav>
                </Switch>
              </BrowserRouter>
            </ReduxProvider>
          </Provider>
        </InjectIntlContext>
      </ConfigProvider>
    </IntlProvider>
  )
}

export default App
